<%@page import="com.augmentum.oes.util.PathUtil"%>
<%@page import="com.augmentum.oes.model.Question"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" isELIgnored="false" pageEncoding="UTF-8"%>
<%@ page import="com.augmentum.oes.util.PropertyUtil" %>
<%@ page import="com.augmentum.oes.util.PathUtil" %>
<%@ page import="com.augmentum.oes.Constants" %>
<%@ page import="com.augmentum.oes.util.StringUtil" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">   
    <title>Login</title>
    <link rel="stylesheet" href="<%=PropertyUtil.getStaticPath() %>/static/css/main.css?timeStamp="<%=Math.random()%>type="text/css" />
    <link rel="stylesheet" href="<%=PropertyUtil.getStaticPath() %>/static/css/question.css?timeStamp="<%=Math.random()%> type="text/css" />
    <link rel="stylesheet" href="<%=PropertyUtil.getStaticPath() %>/static/css/divtable.css?timeStamp="<%=Math.random()%> type="text/css" />
    <script src="<%=PropertyUtil.getStaticPath() %>/static/js/jquery-1.10.2.min.js"></script>
    <script src="<%=PropertyUtil.getStaticPath() %>/static/js/dialog.js?timeStamp="<%=Math.random()%>></script>
    <script src="<%=PropertyUtil.getStaticPath() %>/static/js/question.js?timeStamp="<%=Math.random()%>/></script>
    <script src="<%=PropertyUtil.getStaticPath() %>/static/js/jsonlist.js?timeStamp="<%=Math.random()%>/></script>
  </head>
  <body>
    <div class="header">
    <div class="logo-icon">
    </div>
    <div class="head-title">
        Online Exam System
    </div>
    <div class="user-logout">
      <div class="language">
            中文
      </div>
      <div class="person-info-outdiv">
        <div onclick="javascript:window.location.href='<%=PathUtil.getFullPath("userdetail.action")%>'" class="person-info-inner float-left">
        <div class="person-info-inner"><img src="<%=PropertyUtil.getStaticPath() %>/static/images/ICN_Web_PersonalInformation_20x20.png" class="person-info-currentpage" /></div>
        <span >${USER.userName}</span></div>
        <div class="logout1" onclick="javascript:window.location.href='../static/logout.jsp'">Logout</div>
      </div>
    </div>
    </div>
    <div class="tab-panel">
    <div class="question-manage active" onClick="toQuestionList();">
      Question Management
    </div>
    <div class="exam1-manage" onClick="toExamList();">
      Exam Management
    </div>
    </div>
    <div class="content-panel content-panel-no-breadcrumb">
    <div class="list-panel">
      <div class="menu-list-outdiv margin-top-50">
        <ul class="menu-list">
          <li class="list-over" onClick="toQuestionList();">Question List</li>
          <li onmouseout="this.className='list-out'" onClick="toCreateQuestion();" onmouseover="this.className='list-over'" onclick="toCreate();">Create Question</li>
        </ul>
      </div>
    </div>
    <div class="list-content-panel">
    <div class="search-panel">
      <div class="outdiv search-icon cursor" >
        <%-- <input type="text" class="input" value="${keyWord}" name="search" id="search" placeholder="Please input the keyword"/> --%>
        <input type="text" class="input" oninput="searchByAjax();" value="" name="search" id="search" placeholder="Please input the keyword"/>
        <div id="searchButton" onclick="searchByAjax();"  class="search-icon-div"></div>
      </div>
    </div>
    <div class="list-content">
        <div >
          <div class="head">
                <div class="head-div">
                  <div  class="cursor" onclick="sortByAjax();">
                    <input type="hidden" id="status" value="${sortstatus}"> 
                    ID<img id="sort" />
                  </div>
                </div>
                <div class="head-div">
                  Desription
                </div>
                <div class="head-div">
                  Edit
                </div>
                <div class="sel-div cursor">
                  <img onclick="changeimg_all(this);" id="deleteImg"  />
                </div>
           </div>
              <div style="overflow: auto;height: 300px;" id="listContent">
             
             </div>
          </div>
          <div style="height:30px;bottom:10px;position: absolute;">
     
        <div class="page-div" style="float:left;">
        <div class="page">
            <label id="pageContent"></label> 
           <select name="pageSize" class="pageSizeSelect" id="pageSizeSelect" style="outline:none;" onchange="changeRow();">
             <option id="five" >5</option>
             <option id="ten" >10</option>  
             <option id="fifteen" >15</option>  
             <option id="twenty" >20</option>  
           </select>Per&nbsp;&nbsp;page&nbsp;&nbsp;&nbsp;&nbsp;
             <input type="text" class="page-input" value="" id="pageNumber" name="currentPage"/>
             <button class="btn small-btn" onmouseout="this.className='btn small-btn'" onmouseover="this.className='btn-over small-btn'" onClick="goPage();">GO</button>
           </div>
         </div>
        <input type="hidden" id="keyWordhide" value="" />
        <input type="hidden" id="sorthide" value="" />
        <input type="hidden" id="pageSizehide" value="" />
        <input type="hidden" id="currentPagehide" value="" />
        <input type="hidden" id="countPagehide" value="" />
          <div class="div-button delete-button" onclick="confirmDialogShow('Are sure delete the selected options?');" onmouseout="this.className='div-button delete-button'" onmouseover="this.className='div-button-over delete-button'">Delete</div>
        </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <p> Copyright © 2014 Augmentum, Inc.All Rights Reserved.</p>
    </div>
    <div class="modal-dialog" id="modalDialog">
      <div onclick="modalDialogHidden();" title="Close Dialog" class="modal-dialog-closebutton">
      </div>
      <div class="modal-dialog-msg" id="msgContent">
      </div>
      <div class="modal-dialog-btn-outdiv">
        <div class="modal-btn modal-dialog-btn-yes single-button" onclick="modalDialogHidden();">OK</div>
      </div>
    </div>
    <div class="modal-dialog" id="confirmDialog">
      <div onclick="confirmHidden();" title="Close Dialog" class="modal-dialog-closebutton">
      </div>
      <div class="modal-dialog-msg" id="confirmContent">
      </div>
    <div class="modal-dialog-btn-outdiv">
        <div class="modal-btn modal-dialog-btn-yes" onclick="deleteQuestion();">YES</div>
        <div class="modal-btn modal-dialog-btn-no" onclick="confirmHidden();">NO</div>
      </div>
    </div>
    <div class="modal-div" id="modalDiv">
    </div>
    <script type="text/javascript">

       $(function(){
           $("input").keyup(function(){
               
           });
            document.onkeydown = function(event) {
                if (!event) {
                    event = window.event;
                }
                if ((event.keyCode || e.which) == 13) {
                    var keyWord = $("#search").val();
                    if(!keyWord){
                        modalDialogShow("Please enter search keyword!");
                    }
                    searchByAjax();
                }
            }
      });
    </script>
  </body>
</html>